import _ from 'lodash';
import { onMounted, onUnmounted, ref } from 'vue';

//  缩放比例 - 默认不缩放
export const radio = ref(1);

export let targetX = ref(1920);  //  设计稿宽度
export let targetY = ref(1080);  //  设计稿高度
export let targetRatio = ref(16 / 9);  //  屏幕的宽高比例， 为了缩放比

function triggerScale(options = {}) {
  //  拿到当前设备（浏览器）的宽高 
  const currentX = document.documentElement.clientWidth || document.body.clientWidth;
  const currentY = document.documentElement.clientHeight || document.body.clientHeight;

  //  计算屏幕的缩放比例  - 竖屏，默认
  let scaleRatio = currentX / targetX.value;  //  参照宽度进行缩放 （默认情况）
  let currentRatio = currentX / currentY;
  
  //  处理超宽屏 - 宽高比 较大 （带鱼屏） - 横屏
  if(currentRatio > targetRatio.value) {
    scaleRatio = currentY / targetY.value;  //  参照高度进行缩放
    document.body.style = `width:${currentX}px; height:${currentY}px;`;
    radio.value = scaleRatio;
  } else {
    document.body.style = `width:${targetX.value}px; height:${targetY.value}px; transform: scale(${scaleRatio})`; //  原点 0 0 0
    radio.value = 1;
  }
} 


export function useScalePage(options = {}) {
  targetX.value = options.width || 1920;  //  设计稿宽度
  targetY.value = options.height || 1080;  //  设计稿高度
  targetRatio.value = options.ratio || 16 / 9;  //  屏幕的宽高比例， 为了缩放比

  const listenScale = _.throttle(() => {
    triggerScale()
  }, 100);

  onMounted(() => {
    triggerScale();

    //  监听屏幕尺寸的变化
    window.addEventListener('resize', listenScale, false);
  })

  onUnmounted(() => {
    window.removeEventListener('resize', listenScale, false);
  })
}